<template>
  <a-modal v-model:open="open" title="邀请成员" :footer="false" :width="420" :body-style="{height:'225px'}">
    <a-input-search name="mobile"
                    v-model:value="mobile"
                    :loading="loading"
                    class="margin-bottom"
                    :maxlength="11"
                    @search="onSearch"
                    allow-clear
                    placeholder="输入成员手机号码搜索"/>
    <a-flex v-if="dataSource" justify="space-between" align="center" class="user-container border">
      <a-space>
        <a-avatar :src="dataSource.avatar"/>
        <span>{{dataSource.username}}</span>
      </a-space>
      <a-button><send-outlined/>发送邀请</a-button>
    </a-flex>
    <a-flex v-else justify="center" align="center" class="user-container">
      <a-empty :image="simpleImage" class="margin-none" description="请输入手机号码搜索"/>
    </a-flex>
  </a-modal>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {getUserListByPhone} from "@/services/api/user.ts";
import useMessage from "@/utils/useMessage.ts";
import { Empty } from 'ant-design-vue';
import {SendOutlined} from "@ant-design/icons-vue";

const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
const open = defineModel<boolean>('open',{default:false})
const dataSource = ref<UserInfoSimple>()
const mobile = ref<string>('')
const loading = ref<boolean>(false)
const getUserSimpleList = async () => {
  loading.value = true
  const res:ApiResponse<UserInfoSimple> = await getUserListByPhone(mobile.value)
  if (res.code === 200) {
    dataSource.value = res.data
  }
  setTimeout(()=>loading.value = false,100)
}
const onSearch = () => {
  if(!mobile.value){
    return useMessage(400,'请输入手机号码')
  }
  //校验手机号码格式
  if(!/^1[3456789]\d{9}$/.test(mobile.value)){
    return useMessage(400,'请输入正确的手机号码')
  }
  getUserSimpleList()
}
</script>

<style scoped>
.user-container{
  padding: var(--space);
  border-radius: var(--radius);
  background: #fafafa;
}
.border{
  border:1px solid #f0f0f0;
}
</style>